<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block data-th-replace="/adminlte/base::base-head"></th:block>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<div class="modal fade" id="dialog-article-category">
   <div class="modal-dialog">
       <div class="modal-content" style="border-radius:5px; margin-top: 10%; border-radius: 5px;">
        <div class="modal-header">
            <h4 class="modal-title">修改分类</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div role="form">
            <div class="modal-body">
                <div class="form-group">
                    <ul class="users-list clearfix" style="min-width: 150px;">
                        <li th:each="category:${categoryUtils.list()}" style="text-align: left; width: 100%; min-width: 100px; padding-bottom: 0px;">
                            <label class="mb-0"> 
                                <input type="radio" name="categoryId" th:value="${category.id}" 
                                    th:attr="checked=${article==null?(categoryStat.index==0):(article.categoryId==category.id)}">
                                <th:block th:utext="${category.name}"></th:block>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default float-left" data-dismiss="modal" style="width: 100px" type="button">取消</button>
                <button class="btn btn-success float-right" style="width: 100px" type="button" onclick="changeCategory()">确定</button>
            </div>
        </div>
        </div>
    </div>
</div>
<div class="modal fade" id="dialog-article-tags">
   <div class="modal-dialog">
       <div class="modal-content" style="border-radius:5px; margin-top: 10%; border-radius: 5px;">
        <div class="modal-header">
            <h4 class="modal-title">修改标签</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div role="form">
            <div class="modal-body">
                <div class="form-group">
                    <div class="card-body">
	                  <a th:each="articleTag:${articleTagUtils.list()}" th:utext="${articleTag.name}" class="label label-info"
	                    style="display: inline-block; padding: 8px; margin: 5px;" href="#" onclick="setTag(this)">Default</a>
	                </div>
	                <div class="card-body pt-0">
	                  <textarea id="article-tags" class="form-control" name="tags" rows="3"></textarea>
	                  <p class="help-block">多个标签请用分号（;）隔开。</p>
	                  <div class="tags"></div>
	                </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default float-left" data-dismiss="modal" style="width: 100px" type="button">取消</button>
                <button class="btn btn-success float-right" style="width: 100px" type="button" onclick="changeTags()">确定</button>
            </div>
        </div>
        </div>
    </div>
</div>
<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
<div class="content-wrapper">
	<th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
	<section class="content">
		<div class="container-fluid">
			<div class="card">
	            <div class="card-header">
	            	<div class="row mt-2">
	            	  <button class="btn btn-app" data-dialog="confirm" data-url="/articles/infos" data-method="delete" 
                      data-dialog-t-msg="确定要删除文章吗？" data-check-ids="table tbody input" data-handle="data.ids">
                        <i class="fas fa-trash text-blue"></i> 删除文章
                      </button>
                      <button class="btn btn-app" data-check-ids="table tbody input" data-dialog="show" data-url="#dialog-article-category">
                        <i class="fas fa-edit text-blue"></i> 修改分类
                      </button>
                      <button class="btn btn-app" data-check-ids="table tbody input" data-dialog="show" data-url="#dialog-article-tags">
                        <i class="fas fa-tags text-blue"></i> 修改标签
                      </button>
                      <div class="w-100"></div>
	            		<div class="input-group mx-2 mb-2">
		                  <div class="input-group-prepend">
								<button type="submit" class="btn btn-default" data-get-username="#search-article" onclick="changeThis(this)">
									<i class="fas fa-search"></i>
								</button>
							</div>
							<input id="search-article" type="text" name="table_search" class="form-control" placeholder="Search" 
							  autofocus="autofocus" data-get-search="#search-article" onkeyup="enterThis(this, changeThis)">
		              	</div>
	            	</div>
	            </div>
	            <div class="card-body">
	            	<div class="table-responsive">
		              <table id="user-table" class="table table-bordered table-hover table-striped">
		              	<colgroup>
		              	    <col width="50"/>
		              		<col width="50"/>
		              		<col width="90"/>
		              		<col width="200"/>
		              		<col/>
		              		<col width="60"/>
		              		<col width="200"/>
		              		<col width="150"/>
		              		<col width="60"/>
		              		<col width="60"/>
		              		<col width="60"/>
		              		<col width="60"/>
		              		<col width="60"/>
		              		<col width="170"/>
		              		<col width="170"/>
		              	</colgroup>
		                <thead>
			                <tr>
			                    <th>
                                    <input type="checkbox" name="id"/>
                                </th>
								<th>ID</th>
			                	<th>操作</th>
								<th>作者</th>
								<th>标题</th>
								<th>分类</th>
								<th>标签</th>
								<th>状态</th>
								<th>类型</th>
								<th>置顶</th>
								<th>评论</th>
								<th>评论</th>
								<th>阅读</th>
								<th>更新时间</th>
								<th>创建时间</th>
			                </tr>
		                </thead>
		                <tbody>
		                	<tr data-th-each="article : ${articlePage.data}">
		                	    <td>
                                    <input type="checkbox" name="ids" th:value="${article.id}"/>
                                </td>
		                		<td data-th-utext="${article.id}">id</td>
		                		<td class="td-manage">
									<a title="编辑文章" th:href="${'/admin/article/edit/'+article.id}" style="margin-left: 10px;">
										<i class="fas fa-edit text-blue"></i>
									</a>
									<a title="删除文章" 
									    data-dialog="confirm"
									    data-url="/articles/infos/"
									    data-method="delete"
									    th:data-path="${article.id}"
										th:data-dialog-t-msg="${StringUtils.format('您确定要删除《 %s》吗？', StringUtils.isBlank(article.title)?' ':article.title)}" 
										style="margin-left: 10px;">
										<i class="fas fa-trash text-blue"></i>
									</a>
								</td>
								<td data-th-utext="${userUtils.getNickname(article.userId)}">作者</td>
								<td>
									<a data-th-utext="${article.title}" th:href="${'/article/'+article.id}" target="_blank">标题</a>
								</td>
								<td data-th-utext="${categoryUtils.getName(article.categoryId)}">分类</td>
								<td data-th-utext="${article.tags}">标签</td>
								<td data-th-utext="${article.status.value+' ('+article.status.toString()+')'}">状态角色描述</td>
								<td data-th-utext="${article.type.value}">类型</td>
								<td>
								    <input type="checkbox" name="top" th:value="${article.top}" th:checked="${article.top}" disabled="disabled"/>
								</td>
								<td>
								    <input type="checkbox" name="top" th:value="${article.commentAble}" th:checked="${article.commentAble}" disabled="disabled"/>
								</td>
								<td data-th-utext="${article.commentCount}">评论次数</td>
								<td data-th-utext="${article.viewCount}">展示次数</td>
								<td data-th-utext="${LocalDateTimeUtils.format(article.updateTime)}">更新时间</td>
								<td data-th-utext="${LocalDateTimeUtils.format(article.createTime)}">创建时间</td>
							</tr>
		                </tbody>
		              </table>
	            	</div>
	            	<th:block data-th-replace="/adminlte/base::pageNav(${articlePage}, '篇文章')"></th:block>
	            </div>
			</div>
		</div>
	</section>
</div>
<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/kaibes/js/extend.js"></script>
<script src="/kaibes/js/table-check.js"></script>
<script type="text/javascript">
function setTag(obj) {
    var $tags = $("#article-tags");
    var tags = $tags.val();
    var text = $(obj).text();
    if (tags.indexOf(text)==-1) {
        $tags.val(tags+text+"；");
    } else {
        if (tags.indexOf(text+";")!=-1) {
            $tags.val(tags.replace(text+";", ""));
        } else if (tags.indexOf(text+"；")!=-1) {
            $tags.val(tags.replace(text+"；", ""));
        } else {
            $tags.val(tags.replace(text, ""));
        }
    }
}
function changeCategory() {
    dialog.close("#dialog-article-category");
    let update = {};
    let article = new Object();
    article.categoryId = $("input[name='categoryId']:checked").val();
    update.data = article;
    let ids = [];
    $("input[name='ids']:checked").each((i,v)=>{
        ids.push(v.value);
    });
    update.ids = ids;
    put("/articles/infos", update, ()=>{
        toast.success("修改成功", reload);
    });
}
function changeTags() {
    dialog.close("#dialog-article-tags");
    let update = {};
    let article = new Object();
    article.tags = $("#article-tags").val();
    update.data = article;
    let ids = [];
    $("input[name='ids']:checked").each((i,v)=>{
        ids.push(v.value);
    });
    update.ids = ids;
    put("/articles/infos", update, ()=>{
        toast.success("修改成功", reload);
    });
}
</script>
</body>
</html>